<?php

use yii\helpers\Html;
use yii\widgets\DetailView;
use yii\helpers\Url;

/* @var $this yii\web\View */
/* @var $model backend\models\Product */
$this->title = $model->title;
$this->params['breadcrumbs'][] = ['label' => 'Products', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
$pictures = (array) json_decode($model->pictures, true);
?>
<div id="single-product">
    <div class="container">

        <div class="no-margin col-xs-12 col-sm-6 col-md-5 gallery-holder">
            <div class="product-item-holder size-big single-product-gallery small-gallery">

                <div id="owl-single-product">
                    <div class="single-product-gallery-item" id="slide1">
                        <!--<a data-rel="prettyphoto" href="images/products/product-gallery-01.jpg">-->
                        <img class="img-responsive" alt="" src="//<?php echo $model->cover; ?>" data-echo="assets/images/products/product-gallery-01.jpg" />
                        </a>
                    </div><!-- /.single-product-gallery-item -->
					<?php
					$i = 2;
					foreach ($pictures as $picturesUnit) {
						$smallPictures[] = $picturesUnit;
						?>
						<div class="single-product-gallery-item" id="slide<?php echo $i; ?>">
							<!--<a data-rel="prettyphoto" href="images/products/product-gallery-01.jpg">-->
							<img class="img-responsive" alt="" src="//<?php echo $picturesUnit; ?>" data-echo="assets/images/products/product-gallery-01.jpg" />
							</a>
						</div><!-- /.single-product-gallery-item -->
						<?php
						$i++;
					}
					?>
                    <!-- /.single-product-gallery-item -->
                </div><!-- /.single-product-slider -->


                <div class="single-product-gallery-thumbs gallery-thumbs">

                    <div id="owl-single-product-thumbnails">
                        <a class="horizontal-thumb active" data-target="#owl-single-product" data-slide="0" href="#slide1">
                            <img width="67" alt="" src="//<?php echo $model->cover; ?>" data-echo="assets/images/products/gallery-thumb-01.jpg" />
                        </a>
						<?php
						$i = 2;
						foreach ($smallPictures as $picturesUnit) {
							?>
							<a class="horizontal-thumb" data-target="#owl-single-product" data-slide="<?php echo $i - 1; ?>" href="#slide<?php echo $i; ?>">
								<img width="67" alt="" src="//<?php echo $picturesUnit; ?>" data-echo="assets/images/products/gallery-thumb-01.jpg" />
							</a>
							<?php
							$i++;
						}
						?>
                    </div><!-- /#owl-single-product-thumbnails -->

                    <div class="nav-holder left hidden-xs">
                        <a class="prev-btn slider-prev" data-target="#owl-single-product-thumbnails" href="#prev"></a>
                    </div><!-- /.nav-holder -->

                    <div class="nav-holder right hidden-xs">
                        <a class="next-btn slider-next" data-target="#owl-single-product-thumbnails" href="#next"></a>
                    </div><!-- /.nav-holder -->

                </div><!-- /.gallery-thumbs -->

            </div><!-- /.single-product-gallery -->
        </div><!-- /.gallery-holder -->        
        <div class="no-margin col-xs-12 col-sm-7 body-holder">
            <div class="body">
                <!--<div class="star-holder inline"><div class="star" data-score="4"></div></div>-->
                <!--<div class="availability"><label>Availability:</label><span class="available">  in stock</span></div>-->

                <div class="title"><a href="#"><?php echo $model->title; ?></a></div>
                <div class="brand">特卖</div>

                <div class="social-row">
                    <span class="st_facebook_hcount"></span>
                    <span class="st_twitter_hcount"></span>
                    <span class="st_pinterest_hcount"></span>
                </div>

                <div class="buttons-holder">
                    <a class="btn-add-to-wishlist" href="#">添加到心愿单</a>
                    <a class="btn-add-to-compare" href="#">添加到关注</a>
                </div>

                <div class="excerpt">
                    <p>该商品正在火热清仓跳楼大甩卖，数量有限，欲购从速</p>
                </div>

                <div class="prices">
                    <div class="price-current"><?php echo $model->saleprice; ?></div>
                    <div class="price-prev"><?php echo $model->price; ?></div>
                </div>

                <div class="qnt-holder">
                    <div class="le-quantity">
                        <form>
                            <a class="minus" href="#product" onclick="minusProduct()"></a>
                            <input name="quantity" id="productNumber" readonly="readonly" type="text" value="1" />
                            <a class="plus" href="#product" onclick="plusProduct()"></a>
                        </form>
                    </div>
                </div>
                <a id="addto-cart" href="#single-product" class="le-button huge" onclick="addToCart()">添加到购物车</a>
            </div><!-- /.qnt-holder -->
        </div><!-- /.body -->

    </div><!-- /.body-holder -->
</div><!-- /.container -->
</div><!-- /.single-product -->

<!-- ========================================= SINGLE PRODUCT TAB ========================================= -->
<section id="single-product-tab">
    <div class="container">
        <div class="tab-holder">

            <ul class="nav nav-tabs simple" >
                <li class="active"><a href="#description" data-toggle="tab">商品详情</a></li>
                <!--<li><a href="#additional-info" data-toggle="tab">Additional Information</a></li>-->
                <!--<li><a href="#reviews" data-toggle="tab">Reviews (3)</a></li>-->
            </ul><!-- /.nav-tabs -->

            <div class="tab-content">
                <div class="tab-pane active" id="description">
                    <p><?php echo $model->description; ?></p>

                </div><!-- /.tab-content -->

            </div><!-- /.tab-holder -->
        </div><!-- /.container -->
</section><!-- /#single-product-tab -->
<!-- ========================================= SINGLE PRODUCT TAB : END ========================================= -->
<!-- ========================================= RECENTLY VIEWED ========================================= -->
<?php if (!Yii::$app->user->isGuest) { ?>
	<section id="recently-reviewd" class="wow fadeInUp">
		<div class="container">
			<div class="carousel-holder hover">

				<div class="title-nav">
					<h2 class="h1">最近浏览</h2>
					<div class="nav-holder">
						<a href="#prev" data-target="#owl-recently-viewed" class="slider-prev btn-prev fa fa-angle-left"></a>
						<a href="#next" data-target="#owl-recently-viewed" class="slider-next btn-next fa fa-angle-right"></a>
					</div>
				</div><!-- /.title-nav -->

				<div id="owl-recently-viewed" class="owl-carousel product-grid-holder">
					<?php
					foreach ($recentViewProductList as $recentViewProductUnit) {
						?>
						<div class="no-margin carousel-item product-item-holder size-small hover">
							<div class="product-item">
								<div class="ribbon red"><span>特卖</span></div> 
								<div class="image">
									<a href="<?php echo Url::toRoute(['product/view', 'id' => $recentViewProductUnit->productId]); ?>" 
									   class="thumb-holder">
										<img alt="" src="//<?php echo $recentViewProductUnit->cover; ?>" 
											 data-echo="assets/images/products/product-11.jpg" /></a>
								</div>
								<div class="body">
									<div class="title">
										<a href="<?php echo Url::toRoute(['product/view', 'id' => $recentViewProductUnit->productId]); ?>"><?php echo $recentViewProductUnit->title; ?></a>
									</div>
									<!--<div class="brand">Sharp</div>-->
								</div>
								<div class="prices">
									<div class="price-current text-right"><?php echo $recentViewProductUnit->saleprice; ?></div>
								</div>
								<div class="hover-area">
									<div class="add-cart-button">
										<a href="" class="le-button">添加到购物车</a>
									</div>
									<div class="wish-compare">
										<a class="btn-add-to-wishlist" href="#">添加到心愿单</a>
										<a class="btn-add-to-compare" href="#">关注</a>
									</div>
								</div>
							</div><!-- /.product-item -->
						</div><!-- /.product-item-holder -->
					<?php } ?>
				</div><!-- /#recently-carousel -->
			</div><!-- /.carousel-holder -->
		</div><!-- /.container -->
	</section><!-- /#recently-reviewd -->
	<!-- ========================================= RECENTLY VIEWED : END ========================================= -->		<!-- ============================================================= FOOTER ============================================================= -->
<?php } ?>
<script type="text/javascript">
	
	function  minusProduct() {
		var productNumber = document.getElementById("productNumber");
		if (productNumber.value != 1) {
			productNumber.value -= 1;
		}
	}
	function  plusProduct() {
		var productNumber = document.getElementById("productNumber");
		productNumber.value = parseInt(productNumber.value) + 1;
	}
	
	
	function addToCart() {
		var productNumber = document.getElementById("productNumber").value;
//        alert("running" + productNumber);
		var csrfToken = "<?php echo Yii::$app->request->csrfToken; ?>";
		$.ajax({
			type: "POST",
			url: '<?php echo Yii::$app->request->baseUrl . '/cart/add'; ?>',
			data: {id: <?php echo $model->productId ?>, number: productNumber, _csrf: csrfToken},
			success: function (data) {
				alert("添加购物车成功");
				if (data == 'success') {
					var cartCount = document.getElementById("cartCount");
					cartCount.innerHTML = parseInt(cartCount.innerHTML) + 1;
				}
				var cartTotal = document.getElementById("cartTotal");
				cartTotal.innerHTML = parseInt(cartTotal.innerHTML) + parseInt(productNumber *<?php echo $model->saleprice ?>);
				console.log(document.getElementById("cartCount"));
				console.log(data);
			},
			error: function (data) {
				alert("添加失败");
				console.log(data);
			},
		})
	}
</script>